<template>
  <div class="monitor">
    <div ref="container" style="height: 300px;"></div>
  </div>
</template>

<script>
export default {
  name: "Monitor",
  data() {
    return {
      host: 2,
      cpu_echart: null,
      cpu_data: [],
    }
  },
  mounted() {
    this.init_cpu_echart();
    setInterval(() => {
      this.get_cpu_data();
    }, 1000);
  },
  methods: {
    init_cpu_echart() {
      this.cpu_echart = this.$echarts.init(this.$refs.container);
      var option = {
        title: {
          text: 'CPU使用率'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            params = params[0];
            return params.value[0] + ' : ' + params.value[1];
          },
          axisPointer: {
            animation: true
          }
        },
        xAxis: {
          type: 'time',
          splitLine: {
            show: true
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          splitLine: {
            show: true
          }
        },
        series: [{
          name: '数据',
          type: 'line',
          showSymbol: true,
          hoverAnimation: true,
          data: this.cpu_data
        }]
      };

      if (option && typeof option === 'object') {
        this.cpu_echart.setOption(option);
      }
    },
    get_cpu_data() {
      this.$axios.get(`${this.$settings.host}/monitor/cpu/`, {
        params: {host: this.host},
      }).then((res) => {
        let row = res.data;
        for (var i = 0; i < 5; i++) {
          this.cpu_data.shift();
          this.cpu_data.push(row);
        }
        this.cpu_echart.setOption({
          series: [{
            data: this.cpu_data
          }]
        });
      }).catch((error) => {

      })
    }
  }
}
</script>

<style scoped>

</style>
